.post-content {
  code[class*="language-"],
  pre[class*="language-"] {
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    color: #90a4ae;
    background: #fafafa;
    font-family: Courier, 'Courier New', monospace;
    font-size: 1em;
    line-height: 1.5em;
    tab-size: 4;
    hyphens: none;
  }

  code[class*="language-"]::-moz-selection,
  pre[class*="language-"]::-moz-selection,
  code[class*="language-"] ::-moz-selection,
  pre[class*="language-"] ::-moz-selection {
    background: #cceae7;
    color: #263238;
  }

  code[class*="language-"]::selection,
  pre[class*="language-"]::selection,
  code[class*="language-"] ::selection,
  pre[class*="language-"] ::selection {
    background: #cceae7;
    color: #263238;
  }

  :not(pre) > code[class*="language-"] {
    white-space: normal;
    border-radius: 0.2em;
    padding: 0.1em;
  }

  pre[class*="language-"] {
    overflow: auto;
    position: relative;
    margin: 0.5em 0;
    padding: 2.725rem 1em 1.25em 1em;
  }

  .language-css > code,
  .language-sass > code,
  .language-scss > code {
    color: #f76d47;
  }

  [class*="language-"] .namespace {
    opacity: 0.7;
  }

  .token.atrule {
    color: #7c4dff;
  }

  .token.attr-name {
    color: #39adb5;
  }

  .token.attr-value {
    color: #f6a434;
  }

  .token.attribute {
    color: #f6a434;
  }

  .token.boolean {
    color: #7c4dff;
  }

  .token.builtin {
    color: #39adb5;
  }

  .token.cdata {
    color: #39adb5;
  }

  .token.char {
    color: #39adb5;
  }

  .token.class {
    color: #39adb5;
  }

  .token.class-name {
    color: #6182b8;
  }

  .token.comment {
    color: #aabfc9;
  }

  .token.constant {
    color: #7c4dff;
  }

  .token.deleted {
    color: #e53935;
  }

  .token.doctype {
    color: #aabfc9;
  }

  .token.entity {
    color: #e53935;
  }

  .token.function {
    color: #7c4dff;
  }

  .token.hexcode {
    color: #f76d47;
  }

  .token.id {
    color: #7c4dff;
    font-weight: bold;
  }

  .token.important {
    color: #7c4dff;
    font-weight: bold;
  }

  .token.inserted {
    color: #39adb5;
  }

  .token.keyword {
    color: #7c4dff;
  }

  .token.number {
    color: #f76d47;
  }

  .token.operator {
    color: #39adb5;
  }

  .token.prolog {
    color: #aabfc9;
  }

  .token.property {
    color: #39adb5;
  }

  .token.pseudo-class {
    color: #f6a434;
  }

  .token.pseudo-element {
    color: #f6a434;
  }

  .token.punctuation {
    color: #39adb5;
  }

  .token.regex {
    color: #6182b8;
  }

  .token.selector {
    color: #e53935;
  }

  .token.string {
    color: #f6a434;
  }

  .token.symbol {
    color: #7c4dff;
  }

  .token.tag {
    color: #e53935;
  }

  .token.unit {
    color: #f76d47;
  }

  .token.url {
    color: #e53935;
  }

  .token.variable {
    color: #e53935;
  }

  // 语法高亮工具栏
  .code-toolbar {
    .toolbar {
      background-color: $primary-active-color;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 1;
      display: flex;
      justify-content: space-between;
      padding: 0.25rem 1.725rem;
      width: 100%;
      .toolbar-item {
        .show-language {
          text-transform: capitalize;
          font-weight: bold;
          color: $background-color;
        }
        .select-code {
          box-shadow: none;
          color: $background-color;
          background-color: rgba(225, 225, 225, .2);
          height: 100%;
          border-radius: 0;
          outline: none;
          transition: all 500ms ease 0ms;
          &:hover {
            color: $dark-main-color;
            background-color: $primary-active-color;
          }
        }
      }
    }
  }
}

@mixin dark-mode {
  .post-content {
    code[class*="language-"],
    pre[class*="language-"] {
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      color: #c3cee3;
      background: $dark-skeleton-color;
      font-family: Courier, 'Courier New', monospace;
      font-size: 1em;
      line-height: 1.5em;
      tab-size: 4;
      hyphens: none;
    }

    code[class*="language-"]::selection,
    pre[class*="language-"]::selection,
    code[class*="language-"] ::selection,
    pre[class*="language-"] ::selection {
      background: #363636;
    }

    :not(pre) > code[class*="language-"] {
      white-space: normal;
      border-radius: 0.2em;
      padding: 0.1em;
    }

    .language-css > code,
    .language-sass > code,
    .language-scss > code {
      color: #fd9170;
    }

    [class*="language-"] .namespace {
      opacity: 0.7;
    }

    .token.atrule {
      color: #c792ea;
    }

    .token.attr-name {
      color: #ffcb6b;
    }

    .token.attr-value {
      color: #c3e88d;
    }

    .token.attribute {
      color: #c3e88d;
    }

    .token.boolean {
      color: #c792ea;
    }

    .token.builtin {
      color: #ffcb6b;
    }

    .token.cdata {
      color: #80cbc4;
    }

    .token.char {
      color: #80cbc4;
    }

    .token.class {
      color: #ffcb6b;
    }

    .token.class-name {
      color: #f2ff00;
    }

    .token.color {
      color: #f2ff00;
    }

    .token.comment {
      color: #546e7a;
    }

    .token.constant {
      color: #c792ea;
    }

    .token.deleted {
      color: #f07178;
    }

    .token.doctype {
      color: #546e7a;
    }

    .token.entity {
      color: #f07178;
    }

    .token.function {
      color: #c792ea;
    }

    .token.hexcode {
      color: #f2ff00;
    }

    .token.id {
      color: #c792ea;
      font-weight: bold;
    }

    .token.important {
      color: #c792ea;
      font-weight: bold;
    }

    .token.inserted {
      color: #80cbc4;
    }

    .token.keyword {
      color: #c792ea;
      font-style: italic;
    }

    .token.number {
      color: #fd9170;
    }

    .token.operator {
      color: #89ddff;
    }

    .token.prolog {
      color: #546e7a;
    }

    .token.property {
      color: #80cbc4;
    }

    .token.pseudo-class {
      color: #c3e88d;
    }

    .token.pseudo-element {
      color: #c3e88d;
    }

    .token.punctuation {
      color: #89ddff;
    }

    .token.regex {
      color: #f2ff00;
    }

    .token.selector {
      color: #f07178;
    }

    .token.string {
      color: #c3e88d;
    }

    .token.symbol {
      color: #c792ea;
    }

    .token.tag {
      color: #f07178;
    }

    .token.unit {
      color: #f07178;
    }

    .token.url {
      color: #fd9170;
    }

    .token.variable {
      color: #f07178;
    }

    .code-toolbar {
      .toolbar {
        background-color: $dark-skeleton-color;
        border-bottom: 1px solid $dark-main-color;
        .toolbar-item {
          .show-language {
            color: $dark-main-color;
          }
          .select-code {
            color: $dark-main-color;
            background-color: rgba(225, 225, 225, .1);
            &:hover {
              color: $dark-main-hover-color;
              background-color: $dark-skeleton-color;
            }
          }
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
